<template>
  <div class="app-container">
    <el-card shadow="never">
      <div class="list">
        <div>
          序号
          <el-input v-model.trim="form.sortNum" placeholder="请输入"></el-input>
        </div>
        <div>
          路程小于等于 <el-input v-model.trim="form.minRange" placeholder="请输入"></el-input>Km
        </div>
        <div>
          收费
          <el-input v-model.trim="form.feeAmount" placeholder="请输入"></el-input>
        </div>
        <div>
          <el-button @click="submit(form)" size="mini" type="primary">保存</el-button>
        </div>
        <div>
          <el-button @click="add()" size="mini" type="primary">新增</el-button>
        </div>
        <div>
          <el-button @click="del()" size="mini" type="primary">删除</el-button>
        </div>
      </div>
      <div class="list" v-for="item in list" :key="item.uid">
        <div>
          序号
          <el-input v-model.trim="item.sortNum" placeholder="请输入"></el-input>
        </div>
        <div>
          路程小于等于 <el-input v-model.trim="item.minRange" placeholder="请输入"></el-input>Km
        </div>
        <div>
          每千米收费
          <el-input v-model.trim="item.feeAmount" placeholder="请输入"></el-input>
        </div>
        <div>
          <el-button @click="submit(item)" size="mini" type="primary">保存</el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import * as transportationFee from '../../api/transportationFee'
import Pagination from '@/components/Pagination'
export default {
  components: { Pagination },
  data () {
    return {
      form: {},
      list: [],
    }
  },
  created () {
    this.getList()
  },
  methods: {
    getList () {
      this.listLoading = true
      const param = Object.assign({}, this.searchForm)
      transportationFee.queryByPage(param).then(response => {
        let list = response.data.rows || []
        list.sort(function (a, b) {
          return a.sortNum - b.sortNum; // 按照升序排序
        });
        if (list.length > 0) {
          this.form = list[0]
          this.list = list.slice(1);
        }
      }).catch(error => {
        console.log(error)
      })
    },
    submit (row) {
      if (!row.uid) {
        this.creatHandle(row)
      } else {
        this.editHandle(row)
      }
    },
    creatHandle (row) {
      transportationFee.insert(row).then(response => {
        if (response.code == 200) {
          this.dialogVisible = false
          this.getList()
          this.$message.success('新增成功')
        }
      }).catch(error => {
        console.log(error)
      })
    },
    editHandle (row) {
      delete row.createTime
      delete row.updateTime
      transportationFee.update(row).then(response => {
        if (response.code == 200) {
          this.dialogVisible = false
          this.getList()
          this.$message.success('修改成功')
        }
      }).catch(error => {
        console.log(error)
      })
    },
    delHandle (data) {
      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const param = {
          uid: data.uid,
        }
        transportationFee.deleteById(param).then(result => {
          this.$message.success(result.msg)
          this.getList()
        }).catch(error => {
          this.loading = false
          console.log(error)
        })
      }).catch(() => {
        console.log('取消删除')
      });
    },
    add () {
      this.list.push({})
    },
    del () {
      let data = this.list[this.list.length - 1];
      if (data && data.uid) {
        this.delHandle(data)
      } else {
        this.list.pop()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.list {
  margin: 20px;
  display: flex;
  gap: 30px;

  div {
    display: flex;
    gap: 10px;
    white-space: nowrap;
    align-items: center;
  }
}
</style>